<!DOCTYPE html>
<html lang="zh-CN">
[#include "/theme/default/common/nav.html" /] 
[#include "/theme/default/common/head.html" /]
 [#include "/theme/default/common/footer.html" /]
<head>
[@head "${article.title!''}" /] 
[@js "jsrender.min.js" /]
</head>
<body>
	<div class="fakeloader"></div>

	[@nav 2 /]
	<!-- /.navbar -->

	<div class="container">

		<div class="row">

			<div class="col-xs-12 col-sm-9">
				<h1>${article.title!""}</h1>
				<hr />
				<div>时间 :${article.addDate!""}</div>
				[#if article.tags??]
				<div>[#list article.tags as item] ${item.name!""} [/#list]</div>
				[/#if]
				<hr />
				<article>${article.contents!""}</article>
				<div class="comments" ng-app="myApp" ng-controller="customersCtrl">
					<div class="comments-area">
						<div class="comments-header">
							[@shiro.authenticated]
							<form action="${siteurl}user/updateuser.htm" method="post">

								<div class="form-group">
									<label>个性签名</label>
									<textarea ng-model="contents" class="form-control"
										id="contents" name="introduction" rows="3">${user.introduction!''}</textarea>



								</div>
								<button ng-click="commentwork()" id="button" type="button"
									class="btn btn-default">提交</button>
							</form>
							[/@shiro.authenticated]
							<h5>我来评几句</h5>
							<div style="display: none;"
								class="alert comment-alert alert-error">错误</div>
							<span id="comment-submit" class="btn btn-medium btn-default">登录后评论</span>
							<p style="margin-top: 5px; margin-left: 10px;">
								已发表评论数(<span class="comment_cnt">0</span>)
							</p>
						</div>
						<div class="comments-list">
							<div ng-repeat="item in names">{{item.contents}}</div>
							<div style="display: none;"
								class="empty-cmts alert alert-success">没有更多评论了^^</div>
						</div>
						<div style="display: none;" class="more-comments">
							<a href="">更多评论</a>
						</div>
						<div style="display: none;" class="load-fail">
							评论加载失败，<a href="javascript:reload_comments('yaA7VvN',1,0,-1);">重新加载</a>
						</div>
					</div>
				</div>
				<!--comment end -->
			</div>
			<!--/.col-xs-12.col-sm-9-->

			<div class="col-xs-6 col-sm-3" id="sidebar">
				<div class="list-group">
					[#if catalogs?? && article.catalog??] [#list catalogs as item ]
					[#if item.id =article.catalog.id] <a
						href="${siteurl}article/catalog.htm?id=${item.id}"
						class="list-group-item active">${item.name!""}
						(${item.nums!"0"})</a> [#else] <a
						href="${siteurl}article/catalog.htm?id=${item.id}"
						class="list-group-item ">${item.name!""} (${item.nums!"0"})</a>
					[/#if] [/#list] [/#if]
				</div>
			</div>
			<!--/.sidebar-offcanvas-->
		</div>
		<!--/row-->

		<hr>

		[@footer /]

	</div>
	<!--/.container-->
<script id="theTmpl" type="text/x-jsrender">	
<div class="media">
      <a href="#" class="media-left">
        <img alt="64x64" data-src="holder.js/64x64" class="media-object" style="width: 64px; height: 64px;" src="" data-holder-rendered="true">
      </a>
      <div class="media-body">
        <h4 class="media-heading">Media heading</h4>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </div>
    </div>
</script>
	<script type="text/javascript">
	$(document).ready(function() {
		$.get("${siteurl}articlecomment/page.htm?aid=${article.id}", function(data) {
			if (data.code == 0) {
				var template = $.templates("#theTmpl");
				var htmlOutput = template.render(data.list);
				$("#comments-list").append(htmlOutput);
			};
		});
	});	
	</script>
</body>
</html>
